<template>
  <div class="article">
    <title-vue>文章操作</title-vue>
    <div class="article_list">
      <ul>
        <li>
          <span class="index">序号</span>
          <span class="user">用户</span>
          <span class="title">标题</span>
          <span class="visit">访问量</span>
          <span class="classify">分类</span>
          <span class="oper">操作</span>
        </li>
        <li v-for="(item,index) in res" :key="item.articleid">
          <span class="index">{{index+1}}</span>
          <span class="user">
            <img class="picture" :src="item.picture" :alt="item.name">
            <p>{{item.name}}</p>
          </span>
          <span class="title">
            {{item.title}}
            <svg class='icon' aria-hidden='true' v-if="item.istop">
              <use xlink:href='#icon-zhiding'></use>
            </svg>
          </span>
          <span class="visit">{{item.visit}}</span>
          <span class="classify">{{item.classify}}</span>
          <span class="oper">
            <button @click="isTop(item.articleid)">{{item.istop ? '取消置顶' : '置顶'}}</button>
            <button @click="removeArticle(item.articleid)">删除</button>
            <button @click="reviewArticle(item.articleid)">重审</button>
          </span>
        </li>
      </ul>
      <div v-if="articleData.length == 0" class="hint">
        <span>暂无文章</span>
      </div>
      <paging-vue v-show="articleData.length" @result="showRes" :result="articleData"></paging-vue>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import titleVue from "../title.vue"
import pagingVue from '../../../info/mini/paging.vue'
export default {
  name: 'Article',

  data() {
    return {
      articleData: [], // 所有文章数据
      res: [] // 当前展示数据
    };
  },

  mounted() {
    this.init()
  },

  methods: {
    // 初始化
    init(){
      this.$api.getAllArticle().then(res => {
        this.articleData = res.data
      })
    },
    // 是否置顶
    isTop(id){
      this.$api.isTop({id}).then(res => {
        if(res == 1){
          this.showHint({title:'置顶成功',isFlag:true})
        }else{
          this.showHint({title:'取消置顶',isFlag:true})
        }
        this.init()
      })
    },
    // 删除文章 
    removeArticle(id){
      if(confirm('是否删除该文章？')){
        this.$api.removeArticle({id}).then(res => { 
          this.showHint(res == 1 ? {title: '删除成功!',isFlag: true} : {title: res,isFlag: true})
          this.init()
        })
      }
    },
    // 重新审核文章
    reviewArticle(id){
      if(confirm('是否重申该文章?')){
        this.$api.reviewArticle({id}).then(res => {
          this.showHint(res == 1 ? {title: '已下架，待重审!',isFlag: true} : {title: res,isFlag: true})
          this.init()
        })
      }
    },
    // 展示数据
    showRes(res){
      this.res = res
    },
    ...mapActions(['showHint'])
  },

  components: {
    titleVue,pagingVue
  }
};
</script>

<style scoped>
.article_list {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.article_list ul{
  width: 100%;
  border: 1px solid gray;
  margin-top: 20px;
  font-size: 0.8rem;
}
.article_list ul li{
  display: flex;
  align-items: center;
  border-top: 1px solid gray;
}
.article_list ul li:nth-child(1){
  background-color: green;
  font-weight: 600;
}
.article_list li span{
  height: 40px;
  line-height: 40px;
  border-right: 1px solid gray;
  text-align: center;
}
.article_list li span:last-child{
  border: none;
}
.index,.visit,.classify{
  width: 80px;
  color: green;
}
.user,.oper{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: gray;
}
.title{
  flex: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.title .icon{
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 40px;
}
.article_list ul li:first-child span{
  color: white;
}
.article_list .picture{
  width:  30px;
  height: 30px;
}
.oper button{
  padding: 2px 6px;
  margin: 4px;
  background-color: gray;
  color: white;
  cursor: pointer;
  border-radius: 2px;
  transition: all .3s ease;
}
.oper button:hover{
  background-color: green;
}
</style>